<script setup lang="ts">
    import { reactive,ref } from 'vue'
    import type { FormInstance } from 'element-plus'
    const loginForm=reactive({
        username:'',
        password:'',
        rememberMe:"",
    })
    const ruleFormRef = ref<FormInstance>()
    const submitForm=(loginForm:FormInstance | undefined)=>{
        if (!loginForm) return
        loginForm.validate((valid, fields) => {
            if (valid) {
                console.log('submit!')
            } else {
                console.log('error submit!', fields)
            }
        })
    }
    const rules=reactive({
        username:[
            {required:true,message:'请输入用户名',trigger:'blur'},
            {min:3,max:5,message:'长度在3到5之间',trigger:'blur'}
        ],
        password:[
            {required:true,message:'请输入密码',trigger:'blur'},
            {min:6,max:10,message:'长度在6到10之间',trigger:'blur'}
        ]
    })
</script>

<template>
    <div class="login">
        <div class="login-left">
            <h1>启龙图商城管理</h1>
            <div class="login-img">
                <img src="../../assets/login-box-bg.svg" alt="">
                <h2>欢迎使用启龙图商城管理后台</h2>
            </div>
        </div>
        <div class="login-right">
            <div class="login-box">
                <h1>登录</h1>
                <div class="login-form">
                    <el-form :model="loginForm" :rules="rules" label-position="top" ref="ruleFormRef" class="demo-ruleForm">
                        <el-form-item prop="username" label="账号：">
                            <el-input v-model="loginForm.username" style="height:40px;" placeholder="请输入用户名"></el-input>
                        </el-form-item>
                        <el-form-item prop="password" label="密码：">
                            <el-input v-model="loginForm.password" style="height:40px;" type="password" placeholder="请输入密码"></el-input>
                        </el-form-item>
                        <div style="display:flex;align-items:center;justify-content:space-between">
                            <el-form-item label="">
                                <el-checkbox v-model="loginForm.rememberMe">记住我</el-checkbox>
                            </el-form-item>
                        </div>
                        <el-form-item>
                            <el-button style="width:100%;margin-top:30px;height:45px;" type="primary" @click="submitForm(ruleFormRef)">
                                登   录
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.login{
    display:flex;
    .login-left{
        width:100%;
        height:100vh;
        flex:1;
        background-color:#353e54;
        h1{
            color:#ffffff;
            padding:10px;
        }
        .login-img{
            display:flex;
            align-items:center;
            justify-content:center;
            padding-top:140px;
            flex-direction:column;
            img{
                width:400px;
                height:400px;
            }
            h2{
                color: #ffffff;
            }
        }
    }
    .login-right{
        flex:1;
        .login-box{
            margin:220px 28%;
            .login-form{
                width:400px;
                padding:20px;
            }
        }
    }
}
</style>
